<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己测试 </title>
    <style>
        .test1{
            color: red;
        }
        .test2{
            color: blue;
        }
        .test3{
            color: pink;
        }
        .test4{
            font-size: 40px;
        }

    </style>
</head>
<body>
    <div id="app">
        <p>1、class 绑定</p>
            <p>
                <li v-bind:class="a1"> 字符串 </li>
                <li :class="{test2:is_true}"> 对 象 </li>
                <li :class="['test3','test4']"> 数 组 </li>
            </p>
        <p>2、style 绑定</p>
            <p>
                <li :style="my_test"> style 样式渲染 </li>
            </p>
        <br/>
        <button @click="call_fun"> 点击改变样式 </button>
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            a1:"test1",
            is_true:true,
            test3:'red',
            my_test:{
                color:'red',
                'font-size': '40px',
            }
        },
        methods:{
            call_fun:function(){
                    this.a1 = 'test2'
            }
        }

    })
</script>